<template>
  <!-- 入场人数实时统计 -->
  <div class="left-top-box">
    <group-card :title="title">
      <div class="left-top-box-inner">
        <!-- 图表区域 -->
        <div class="my-chart" ref="myChartRef"></div>
        <!-- tooltip -->
        <div class="chart-tooltip">
          <div
            class="chart-tooltip-item"
            v-for="item in echartsOptions.series[0].data"
            :key="item.value"
          >
            {{ item.name }}:<span style="color: #ffffff; margin-left: 10px">{{
              item.value
            }}</span>
          </div>
        </div>

        <div class="all-num-box">
          <div class="all-num-text">
            总人数：<span class="all-num">{{
              addCommaToNumber(todayCountData.personCount || 0)
            }}</span>
          </div>
          <div class="all-num-text">
            总次数：<span class="all-num">{{
              addCommaToNumber(todayCountData.personTime || 0)
            }}</span>
          </div>
        </div>

        <ComTab :tab-value="personType" @change="handleChangeTab" />
      </div>
    </group-card>
  </div>
</template>

<script setup name="carView">
import { addCommaToNumber } from "@/utils";
const props = defineProps({
  echartsData: {
    type: Array,
    default: () => [],
  },
  todayCountData: {
    type: Object,
    default: () => ({}),
  },
  title: String,
  personType: String,
});
import * as echarts from "echarts";
console.log("echarts", props.echartsData);
const emits = defineEmits(["tabChange", "update:personType"]);

const handleChangeTab = (val) => {
  emits("update:personType", val);
  emits("tabChange");
};

const myChartRef = ref(null);
// data
const state = reactive({
  // echarts 配置
  chart: null,
  echartsOptions: {
    legend: {
      bottom: "0%",
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        color: "#fff", // 文字颜色
        fontSize: 13,
        // borderColor: "red", // 边框颜色
      },
    },

    series: [
      {
        // name: "Nightingale Chart",
        type: "pie",
        radius: [30, 110],
        center: ["20%", "44%"], //调整图像位置
        roseType: "radius",
        // roseType: 'area',
        minAngle: 10,
        labelLine: {
          // 是否显示标签引导线
          show: false,
        },
        label: {
          // 是否显示标签引导
          show: false,
        },
        itemStyle: {
          borderWidth: 8, // 设置圆边线的宽度
          // borderColor: "#fff", // 设置圆边线的颜色
          // shadowColor: "rgba(0, 0, 0, 0.6)",
          // shadowBlur: 200,
        },
        data: [],
        z: 2,
      },
    ],
    graphic: [
      {
        type: "circle",
        shape: {
          r: 32,
        },
        style: {
          fill: "#6a6969",
          stroke: "transparent",
          lineWidth: 1,
          lineDash: "solid",
        },
        left: "12%",
        top: "37%",
        z: 3,
      },
      {
        type: "circle",
        shape: {
          r: 10,
        },
        style: {
          fill: "#3c3b3b",
          stroke: "#4f4e4e",
          lineWidth: 1,
          lineDash: "solid",
        },
        left: "17%",
        top: "41.5%",
        z: 4,
      },
    ],
  },
});

const allNum = ref(0);

const { chart, echartsOptions } = toRefs(state);
watch(
  () => props.echartsData,
  () => {
    updateChart();
  }
);

const colorArr = [
  {
    name: "ITTF",
    color: "#578D31",
  },

  {
    name: "WTMG",
    color: "#C00000",
  },
  {
    name: "CTTA",
    color: "#FFC000",
  },
  {
    name: "代表队",
    color: "#4471C4",
  },
  {
    name: "技术官员",
    color: "#30C0B4",
  },
  {
    name: "兴奋剂检测",
    color: "#FFFFFF",
  },
  {
    name: "组委会",
    color: "#FEF2CA",
  },
  {
    name: "第三方执行机构",
    color: "#9550CB",
  },
  {
    name: "志愿者",
    color: "#EF949E",
  },
  {
    name: "安保保障",
    color: "#000000",
  },
  {
    name: "媒体",
    color: "#833F0A",
  },
  {
    name: "转播",
    color: "#7F7F7F",
  },
  {
    name: "世界杯公园",
    color: "#E54C5E",
  },
];

//methods
const updateData = () => {
  let num = 0;
  state.echartsOptions.series[0].data = props.echartsData.map((item) => {
    const dataPoint = {
      name: item.name,
      value: item.count,
      itemStyle: {
        color: colorArr.find((i) => i.name === item.name)?.color || "#3c3b3b",
      },
    };

    // 打印数据
    console.log("Mapped Data Point:", dataPoint);

    num += item.count;
    return dataPoint;
  });
  allNum.value = num;
};
// 初始化图表
const initEcharts = () => {
  updateData();
  chart.value = shallowRef(echarts.init(myChartRef.value));
  const initOptions = echartsOptions.value;
  chart.value.setOption(initOptions);
};
// // 修改图表
const updateChart = () => {
  updateData();
  const updateOptions = echartsOptions.value;
  chart.value.setOption(updateOptions);
};
// 屏幕适配
const screenAdaperPh = () => {
  chart.value.setOption(echartsOptions.value);
  nextTick(() => {
    chart.value.resize();
  });
};
onMounted(() => {
  // console.log("props", props.echartsData);
  initEcharts();
  window.addEventListener("resize", screenAdaperPh);
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", screenAdaperPh);
});

defineExpose({
  // updateChart,
});
</script>

<style lang="scss" scoped>
.left-top-box {
  height: 580px;
  // background-color: #979494;

  // margin-top: 30px;
  display: flex;
  flex-direction: column;
  position: relative;

  .left-top-box-inner {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 15px 20px;

    .my-chart {
      flex: 1;
    }

    .chart-tooltip {
      padding: 10px 8px 10px 26px;
      position: absolute;
      right: 0px;
      background: rgba($color: #000000, $alpha: 0.1);
      border-top: 1px solid #665566;
      transform: scale(0.8);
      font-size: 20px;
      top: 5%;
      user-select: none;

      &::before {
        content: "";
        display: block;
        width: 2px;
        height: 80px;
        background-color: #ffc1e94d;
        position: absolute;
        top: 0;
        left: 0;
        transform: rotate(45deg);
        transform-origin: top;
        z-index: -1;
      }

      .chart-tooltip-item {
        color: #ffffff;
        padding: 1px 0px;
        box-sizing: border-box;
        position: relative;

        &::before {
          content: "";
          display: block;
          position: absolute;
          width: 5px;
          height: 5px;
          border-radius: 50%;
          background-color: #ffffff;
          left: -15px;
          top: 50%;
          transform: translate(0, -50%);
        }
      }
    }

    .all-num-box {
      position: absolute;
      left: 18px;
      top: 4%;
      width: 170px;
      height: 75px;
      font-size: 15px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 0) 100%
      );
      backdrop-filter: blur(2px);

      &::before {
        content: "";
        position: absolute;
        left: 0%;
        top: 50%;
        transform: translate(0%, -50%);
        width: 90%;
        height: 1px;
        background: linear-gradient(
          90deg,
          rgba(255, 255, 255, 1) 0%,
          rgba(255, 255, 255, 0.3) 20%,
          rgba(255, 255, 255, 0) 100%
        );
      }

      .all-num-text {
        white-space: nowrap;
        position: relative;
        flex: 1;
        width: 100%;
        box-sizing: border-box;
        padding-left: 15px;
        display: flex;
        align-items: center;
        margin-left: 15px;
        margin-right: 15px;
        color: rgba(255, 255, 255, 0.8);

        .all-num {
          color: #fff;
          font-size: 16px;
        }
      }
    }
  }
}
</style>
